<template>
  <view class="staff-selector">
    <view class="popup-title align-left">
      选择营业员
    </view>
    <view class="search-bar">
      <uni-easyinput v-model="searchKey" primaryColor="#38C09E" placeholder="输入营业员名称/手机号后四位" />
    </view>
    <view class="staff-list">
      <view class="staff-item flex align-center justify-between" :class="{active:item.staff_no===current}"
        v-for="item in setStaffList" @click="onSelect(item.staff_no)">
        <view class="">
          <text class="cuIcon-myfill margin-right text-gray"></text> {{item.name||''}}
        </view>
        <text class="margin-left cuIcon-roundcheckfill text-green" v-if="item.staff_no===current"></text>
      </view>
      <view class="text-center padding text-gray" v-if="!setStaffList||setStaffList.length===0">
        <text v-if="searchKey">暂无相关营业员</text>
        <text v-else>暂无营业员</text>
      </view>
    </view>
    <view class="button-box">
      <button class="button full lg" @click="confirm">确定</button>
    </view>
  </view>
</template>

<script>
  export default {
    // 营业员选择
    name: "staff-assistant-selector",
    data() {
      return {
        current: "",
        searchKey: ""
      };
    },
    computed: {
      setStaffList() {
        if (this.searchKey) {
          return this.staffAssistantList.filter(item => (item.name && item.name.indexOf(this.searchKey) > -1) || (item
            .phone && item.phone.indexOf(this.searchKey) === 7))
          // || (item.phone && item.phone.indexOf(this.searchKey) > -1)
        } else {
          return this.staffAssistantList
        }
      },
      curAssistant() {
        return this.$store.state.$curAssistant
      },
      curStaff() {
        return this.current && this.staffAssistantList.find(item => item.staff_no === this.current)
      }
    },
    created() {
      if (this.curAssistant?.staff_no) {
        this.current = this.curAssistant?.staff_no
      }
    },
    methods: {
      onSelect(e) {
        if (this.current === e) {
          this.current = ''
        } else {
          this.current = e
        }
      },
      confirm() {
        this.$store.commit('SET_STATE', {
          key: '$curAssistant',
          value: this.curStaff
        })
        this.$emit('confirm', this.curStaff)
      },
    },
  }
</script>

<style lang="scss" scoped>
  .staff-selector {
    width: 56rem;
    height: 60rem;
    display: flex;
    flex-direction: column;

    .popup-title {
      padding: 2rem 4rem;
    }

    .button-box {
      padding: 2rem 4rem;
    }

    .search-bar {
      padding: 0 4rem;
    }

    .staff-list {
      padding: 2rem 4rem;
      font-size: 2.4rem;
      max-height: 40rem;
      overflow-y: scroll;
      flex: 1;

      .staff-item {
        padding: 1.3rem;
        border: 1px solid #E5E5E5;
        border-radius: 1rem;
        margin-bottom: 1.5rem;

        &.active {
          border-color: $retail-color-primary;
          background-color: $retail-color-primary-light;
        }
      }
    }
  }
</style>
